<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{fragment/header :: header}"></th:block>
    <meta charset="UTF-8">
    <title>创建队伍</title>
</head>
<body>
<main class="ui fluid container" id="cteam">
    <div class="ui form">
        <div class="field">
            <label for="name">
                Team Name，队伍名（设置后不可修改）
            </label>
            <input id="name" placeholder="Team Name" type="text" v-model="name">
        </div>
        <div class="field">
            <label for="description">简介,设置后不可修改</label>
            <input id="description" type="text" v-model="description">
        </div>
        <div class="field">
            <label for="attend">加入方式</label>
            <select id="attend" name="attend" v-model="attend">
                <option value="public">Public</option>
                <option value="private">Private</option>
            </select>
        </div>
        <div @click="submit()" class="ui inverted primary button">提交</div>
    </div>
</main>
<script>
    cteam = new Vue({
        el: "#cteam",
        data: {
            name: "",
            description: "",
            attend: "private"
        },
        methods: {
            submit() {
                axios.post("/api/team/create", {
                    name: this.name,
                    description: this.description,
                    attend: this.attend
                }).then(function (res) {
                    if (res.data != "success") {
                        alert(res.data);
                    } else {
                        alert("success");
                        location.href = "/team";
                    }
                })
            }
        }
    })
</script>
<footer th:replace="~{fragment/footer :: footer}"></footer>
</body>
</html>